<template>
  <div class="add-form">
    <el-form :model="dialogForm"
             :rules="dialogFormRules"
             ref="dialogFormRef"
             label-width="100px">
      <el-form-item label="企业名称"
                    prop="shortName">
        <el-input v-model="dialogForm.shortName"
                  class="ipt"></el-input>
      </el-form-item>
      <el-form-item label="所属公司"
                    prop="company">
        <el-input v-model="dialogForm.company"
                  class="ipt"></el-input>
      </el-form-item>
      <el-form-item>
        <span>https://www.tianyancha.com （在此可查询所属公司全称及简称）</span>
      </el-form-item>
      <el-form-item label="城市地区"
                    prop="province">
        <el-select placeholder="请选择"
                   @change="changePro"
                   v-model="dialogForm.province">
          <el-option v-for="(item,index) in provinces"
                     :key="index"
                     :label="item"
                     :value="index"></el-option>
        </el-select>
        <el-select v-model="dialogForm.city"
                   class="selectCls"
                   placeholder="请选择">
          <el-option v-for="(item,index) in citys"
                     :key="index"
                     :label="item"
                     :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向(企业标签)"
                    prop="tags">
        <el-input v-model="dialogForm.tags"
                  class="ipt"></el-input>
      </el-form-item>
      <el-form-item label="备注"
                    prop="remarks">
        <el-input v-model="dialogForm.remarks"
                  placeholder="请输入"
                  type="textarea"
                  class="ipt"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'CompanysAdd',
  props: {
    // 添加和编辑弹框
    dialogVisible: {
      type: Boolean,
      required: true
    },

    // 省市数组
    provinces: {
      type: Array,
      required: true
    },
    citys: {
      type: Array,
      required: true
    },

    // 获取父组件请求的的一行数据
    data: {
      type: Object,
      required: true
    }
  },

  created() {
    // 将获取的数据加载到编辑弹框的表单中
    this.dialogForm = this.data
    this.dialogForm.isFamous = true
  },

  mounted() {
    // 将ref值传给父组件
    this.$emit('setRef', this.$refs.dialogFormRef)
  },

  data() {
    return {
      // 对话框中的form数据
      dialogForm: {
        isFamous: true,
        shortName: '',
        company: '',
        tags: '',
        remarks: '',
        province: '',
        city: '',
        number: null
      },

      dialogFormRules: {
        shortName: [{ required: true, message: '企业简称不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '所属公司不能为空', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        province: [{ required: true, message: '请选择省份', trigger: 'change' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      } // 弹框验证规则
    }
  },

  methods: {
    // 弹框中的城市选择框change事件
    changePro(e) {
      const city = citys(this.provinces[e])
      this.$emit('changeCity', city)
      this.dialogForm.province = this.provinces[e]
      this.dialogFormRules.province[0].required = false
    }
  },

  watch: {
    // 监听citys数组，改变时立即改变city的值
    citys(newCity) {
      // 将地区的第一个自动显示出来
      this.dialogForm.city = newCity[0]
    },

    // 利用深监听，监听对象的每一项是否改变
    dialogForm: {
      handler: function (newForm) {
        this.$emit('setForm', newForm)
      },
      deep: true
    },

    // 监听传入的data，将最新的值更新到表单
    data: {
      handler: function (newData) {
        this.dialogForm = newData
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.selectCls {
  margin-left: 36px;
}
.ipt {
  width: 480px;
}
::v-deep .el-dialog__body {
  padding: 30px 50px;
}
::v-deep .el-form-item__label {
  margin-right: !important 6px;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
</style>
